<template>
  <div class="cs-modal">
    <div class="cs-modal-controller">
      <div class="modal-header">
        <div>{{hideModalNum}}</div>
        <div class="open-icon">
          <Button @click="showListTag = !showListTag">点击</Button>
        </div>
      </div>
      <div class="modal-body" v-show="showListTag">
        <div v-for="modal,key in modalData" :key="modal.randomId" v-show="!modal.modalData.isHide" @click="hideModal(key,modal,true)">
          {{modal}}
          {{key}}
        </div>
      </div>
    </div>
    <div class="cs-modal-box">
      <div class="modal-item" v-for="modal,key in modalData" :key="modal.randomId">
        <vxe-modal 
          v-model="modal.modalData.isHide" 
          :className="'CS-Modal modal-'+key"
          :id="modal.randomId" 
          :width="modal.modalData.width" 
          :height="modal.modalData.height" 
          :min-width="modal.modalData.minWidth || 300" 
          :min-height="modal.modalData.minHeight || 300" 
          :lock-view="false"
          :mask="false"
          :dblclickZoom='false'
          :destroy-on-close="true"
          show-zoom 
          resize
          storage 
          transfer>
            <template #header>
              <div class="cs-modal_content-header">
                <div class="cs-modal_header-title">{{modal.componentData.title}}</div>
                <div class="cs-modal_header-btn">
                  <div><Button @click="hideModal(key)">最小化</Button></div>
                  <div><Button @click="toMaxModal(key,modal)">最大化</Button></div>
                  <div><Button @click="hideModalContent(key,modal)">隐藏内容</Button></div>
                  <div><Button @click="closeModal(key)">关闭</Button></div>
                </div>
              </div>
            </template>
            <template #default>
              <div :class="'modal'+key"></div>
            </template>
        </vxe-modal>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  export default{
    name:'cs-modal',
    props:{
      isDrog:{default:true}
    },
    data:()=>{
        return {
          modalTitleHeight:'40px',
          modalData:{},
          showListTag:false,
        }
    },
    computed: {
      hideModalNum(){
        let num = 0; 
        Object.keys(this.modalData).map(item=>{
          const currentModal = this.modalData[item];
          if(currentModal.modalData.isHide === false){
            num++;
          }
        })
        return num;
      }
    },
    methods: {
      /**
       *  optionId 唯一id string
       *  modalData modal数据 {} 
       *  componentData 组件数据 {} 
       *  componentEvent 组件事件 {}
       * */ 
      createModal(randomId,optionId,modalData,componentData,componentEvent){
        if(this.modalData[optionId]){
          if(this.modalData[optionId] && this.modalData[optionId].modalData){
            this.modalData[optionId].modalData.isHide = true;
          }
        } else {
          this.$set(this.modalData,optionId,{
            modalData,
            componentData,
            randomId,
          });
          // 动态挂载组件
          setTimeout(()=>{
            this.$nextTick(()=>{
              componentData.componentData().then((prarm)=>{
                const asynComponet = Vue.extend(prarm.default);
                const instance = new asynComponet({
                  propsData:componentData.componentProps
                });
                // 事件监听
                if(componentEvent){
                  for(const key in componentEvent){
                    instance.$on(key,componentEvent[key]);
                  }
                }
              instance.$mount('.modal'+optionId);
              }).catch(err=>{
                console.log('异步组件异常',err);
              });
            });
          },10);
        }
      },
      closeModal(optionId){
        if(this.modalData[optionId]){
          this.$set(this.modalData,optionId,null);
          delete this.modalData[optionId];
        }
      },
      hideModal(optionId,modalInfo,tag=false){
        if(this.modalData[optionId] && this.modalData[optionId].modalData){
          this.modalData[optionId].modalData.isHide = tag;
          if(tag){
            if(modalInfo.modalData.height === this.modalTitleHeight && modalInfo.modalData.oldHeight){
              modalInfo.modalData.height =  modalInfo.modalData.oldHeight;
            }
          }
        }
      },
      toMaxModal(modalKey,modalInfo){
        if(!this.$vxe.modal.get(modalInfo.randomId).isMaximized() && this.$vxe.modal.get(modalInfo.randomId).height === this.modalTitleHeight){
          this.hideModalContent(modalKey,modalInfo);
        }
        this.$vxe.modal.get(modalInfo.randomId).zoom();
      },
      hideModalContent(modalKey,modalInfo){
        if(this.$vxe.modal.get(modalInfo.randomId).isMaximized()){
          this.$vxe.modal.get(modalInfo.randomId).revert();
          setTimeout(()=>{
            this.$nextTick(()=>{
              if(this.$vxe.modal.get(modalInfo.randomId).height === this.modalTitleHeight){
                modalInfo.modalData.height =  modalInfo.modalData.oldHeight;
              } else {
                // 获取容器实际高度
                try {
                  const modalContentHeight = document.querySelector(`.modal-${modalKey} .vxe-modal--box`).style.height;
                  this.$set(modalInfo.modalData,'oldHeight',modalContentHeight);
                  modalInfo.modalData.height =this.modalTitleHeight;  
                } catch (error) {
                  this.$set(modalInfo.modalData,'oldHeight',modalInfo.modalData.height);
                  modalInfo.modalData.height =this.modalTitleHeight;  
                }
              }
            });
          },10);
        }else{
          if(this.$vxe.modal.get(modalInfo.randomId).height === this.modalTitleHeight){
            modalInfo.modalData.height =  modalInfo.modalData.oldHeight;
          } else {
            // 获取容器实际高度
            try {
              const modalContentHeight = document.querySelector(`.modal-${modalKey} .vxe-modal--box`).style.height;
              this.$set(modalInfo.modalData,'oldHeight',modalContentHeight);
              modalInfo.modalData.height =this.modalTitleHeight;  
            } catch (error) {
              this.$set(modalInfo.modalData,'oldHeight',modalInfo.modalData.height);
              modalInfo.modalData.height =this.modalTitleHeight;  
            }
          }
        }
      }
    },
    created () {
      // 将方法注册到全局
      Vue.prototype.$CSModal = {
        createModal:this.createModal,
        closeModal:this.closeModal,
        hideModal:this.hideModal
      } 
    },
    beforeDestroy () {
      // 注销全局方法
      Vue.prototype.$CSModal = null;
    }
  }
</script>
<style lang="less">
    @import url('./index.less');
</style>